<template>
  <!--<view class="recommend" v-if="list && list.length > 0">-->
  <view class="recommend" v-if="categoryList.length > 0 || areaList.length > 0">
    <view class="title">
      <view class="item" :class="{'active': currentIndex === 1}" @click="currentIndex = 1">搭配推荐</view>
      <view class="item" :class="{'active': currentIndex === 2}" @click="currentIndex = 2">相似推荐</view>
    </view>
    <view class="list">
      <view class="item" v-for="item in list" :key="item.id" @click="goProduct(item)">
        <view class="x">
          <v-image :url="item.mainImage.path" v-if="item.mainImage" :width="'160rpx'" :height="'160rpx'" />
        </view>
        <view class="desc">
          <view class="title two-lines">{{item.title}}</view>
          <view class="title_sub two-lines" v-if="item.title_sub">{{item.title_sub}}</view>
          <v-price :product="item" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Price from '../../../components/price/index'
import Image from '../../../components/image/index'
import ProductModel from '../../../api/product'
import base64 from '../../../util/base64'
const productModel = new ProductModel()

export default {
  props: ['productId'],
  components: {
    'v-image': Image,
    'v-price': Price
  },
  computed: {
    list() {
      return this.currentIndex === 2 ? this.categoryList: this.areaList
    }
  },
  data() {
    return {
      currentIndex: 1,
      categoryList: [],
      areaList: []
    }
  },
  methods: {
    fetch() {
      productModel.detailRecommend({ id: this.productId }).then(response => {
        let { data } = response
        data = base64.parse(data)
        this.categoryList = data.category
        this.areaList = data.area
      })
    },
    goProduct(item) {
      uni.navigateTo({
        url: `/sub_product/detail/index?id=${item.id}`
      })
    }
  },
  created() {
    this.fetch()
  }
}
</script>

<style scoped lang="scss">
.recommend {
  min-height: 100rpx;
  background: white;
  padding: 20rpx;
  border-radius: 10rpx;
  .title {
    display: flex;
    height: 80rpx;
    .item {
      flex: 1;
      text-align: center;
      color: #333333;
      font-size: 26rpx;
      &.active {
        font-weight: 700;
        color: $main_color;
      }
    }
  }
  .list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 30rpx;
    column-gap: 10rpx;
    grid-auto-rows: minmax(1rpx, auto);
    .item {
      font-size: 24rpx;
      .title {
        font-weight: 700;
        font-size: 24rpx;
        margin-top: 20rpx;
      }
      .title_sub {
        color: #999999;
        font-size: 24rpx;
      }
      .title, .title_sub {
        height: 60rpx;
        line-height: 30rpx;
      }
      .x {
        background: #f7f6f7;
        width: 200rpx;
        height: 200rpx;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
